<template>
  <div id="chart" ref="chartRef"></div>
</template>

<script>
import { chartRender } from "../model";
export default {
  name: "barChart",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    // let { data } = reportData[1];
    // this.data = data;
    // this.initData();
    // this.myChart = this.$echarts.init(this.$refs.chartRef);
    // this.option = {
    //   legend: this.legend,
    //   grid: this.grid,
    //   tooltip: { show: true },
    //   xAxis: {
    //     type: "category",
    //     data: this.x_list,
    //     // axisLabel: {
    //     //   formatter: function (value) {
    //     //     return value.split("").join("\n");
    //     //   },
    //     // },
    //     axisTick: {
    //       show: false, //刻度线
    //     },
    //   },
    //   yAxis: [
    //     {
    //       type: "value",
    //       axisLine: { show: true },
    //       // interval: 2, //强制设置坐标轴分割间隔。
    //       splitLine: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         formatter: function (value) {
    //           return value.toFixed(2); // 保留两位小数
    //         },
    //       },
    //       axisTick: {
    //         show: true,
    //         inside: true,
    //       },
    //     },
    //     {
    //       type: "value",
    //       name: "Precipitation",
    //       position: "right",
    //       alignTicks: true,
    //       offset: 80,
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: chartColor.highlight,
    //         },
    //       },
    //       axisLabel: {
    //         formatter: "{value}",
    //       },
    //     },
    //   ],
    //   series: [
    //     ...this.series,
    //     {
    //       name: "Precipitation",
    //       type: "line",
    //       showSymbol: false,
    //       itemStyle: {
    //         color: chartColor.highlight,
    //       },
    //       yAxisIndex: 1,
    //       data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
    //     },
    //   ],
    // };
    // this.myChart.setOption(this.option);
    // option = {
    //   color: colors,
    //   tooltip: {
    //     trigger: "axis",
    //     axisPointer: {
    //       type: "cross",
    //     },
    //   },
    //   grid: {
    //     right: "20%",
    //   },
    //   toolbox: {
    //     feature: {
    //       dataView: { show: true, readOnly: false },
    //       restore: { show: true },
    //       saveAsImage: { show: true },
    //     },
    //   },
    //   legend: {
    //     data: ["Evaporation", "Precipitation", "Temperature"],
    //   },
    //   xAxis: [
    //     {
    //       type: "category",
    //       axisTick: {
    //         alignWithLabel: true,
    //       },
    //       // prettier-ignore
    //       data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    //     },
    //   ],
    //   yAxis: [
    //     {
    //       type: "value",
    //       name: "Evaporation",
    //       position: "right",
    //       alignTicks: true,
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: colors[0],
    //         },
    //       },
    //       axisLabel: {
    //         formatter: "{value} ml",
    //       },
    //     },
    //     {
    //       type: "value",
    //       name: "Precipitation",
    //       position: "right",
    //       alignTicks: true,
    //       offset: 80,
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: colors[1],
    //         },
    //       },
    //       axisLabel: {
    //         formatter: "{value} ml",
    //       },
    //     },
    //     {
    //       type: "value",
    //       name: "温度",
    //       position: "left",
    //       alignTicks: true,
    //       axisLine: {
    //         show: true,
    //         lineStyle: {
    //           color: colors[2],
    //         },
    //       },
    //       axisLabel: {
    //         formatter: "{value} °C",
    //       },
    //     },
    //   ],
    //   series: [
    //     {
    //       name: "Evaporation",
    //       type: "bar",
    //       data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    //     },
    //     {
    //       name: "Precipitation",
    //       type: "bar",
    //       yAxisIndex: 1,
    //       data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
    //     },
    //     {
    //       name: "Temperature",
    //       type: "line",
    //       yAxisIndex: 2,
    //       data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    //     },
    //   ],
    // };
  },
  methods: {
    initData() {
      let { title, x_list, series, highlight } = this.data;
      this.title = title;
      this.x_list = x_list;
      this.legend = null;
      series.forEach((item) => {
        let data = item.data;
        let color = item.type === "平均值" ? chartColor.highlight : chartColor.default;
        data.forEach((yData, index, arr) => {
          if (highlight && highlight.includes(x_list[index])) {
            //因为从LLM组直接渲染到界面的时候我已经解析了，现在是块编辑引擎在渲染的时候就不需要在解析了
            if (yData.itemStyle) return;
            arr[index] = {
              value: yData,
              itemStyle: { color: chartColor.highlight },
            };
          }
        });
        item["type"] = "bar";
        item["itemStyle"] = { color };
      });
      this.grid = { top: 20, left: 0, right: 0, bottom: 10, containLabel: true };
      //有两条线的 展示图例
      if (series.length > 1) {
        this.legend = { top: 40 };
        this.grid.top = 60;
      }
      this.series = series;
    },
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
          newVal && chartRender({ id: this.$refs.chartRef, data: newVal });
        });
      },
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../index.scss";
</style>
